
<template>
  <div class="el-dialog-div" ref="formBox">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-row>
        <el-form-item label="UID" prop="userId">
          <el-select v-model="queryParams.search" filterable placeholder="输入UID,名字,电话号码" style="width:100%" :filter-method="query" @change="changeType($event)">
            <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>

      <div v-if="showTable">
        <el-row>
          <el-col :span="12">
            <el-form-item label="现有金额" prop="cashAmount">
              <el-input v-model="selectUserInfo.appUserAccCash.cashAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现金" prop="cashNum">
              <el-input-number v-model="form.cashNum" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现有金积分" prop="goldAmount">
              <el-input v-model="selectUserInfo.appUserAccIntegral.goldAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金积分" prop="goldNum">
              <el-input-number v-model="form.goldNum" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="现有银积分" prop="sliverAmount">
              <el-input v-model="selectUserInfo.appUserAccIntegral.silverAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银积分" prop="sliverNum">
              <el-input-number v-model="form.sliverNum" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="现有佣金" prop="brokerageAmount">
              <el-input v-model="selectUserInfo.appUserAccBrokerage.brokerageAmount" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="佣金" prop="brokerageNum">
              <el-input-number v-model="form.brokerageNum" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="原邀请码" prop="inviteCode">
              <el-input v-model="selectUserInfo.inviteCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邀请码" prop="inviteCode">
              <el-input v-model="form.inviteCode" style="width:130px" />
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="艺术指数" prop="artExponent">-->
<!--              <el-input v-model="selectUserInfo.appUserArtist.artExponent" disabled />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="艺术指数" prop="artExponent">-->
<!--              <el-input v-model="form.artExponent" style="width:130px" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

        <el-form-item label="说明" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
      </div>

    </el-form>
  </div>
</template>

<script>
import { getVipList } from "@/api/vip/vip.js";

export default {
  name: 'FormView',
  watch: {
    "userForm": {
      deep: true,
      handler: function (newV, oldV) {
        this.getScreenUserList();
      },
    },
  },

  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        search: undefined
      },
      rules: {
        remark: [{ required: true, message: "必填", trigger: "blur" }],
      },
      //   showTable: true,
      innerVisible: false,
      showTable: false,
      search: '',
      radio: 0,
      params: {
        id: undefined,
        userId: undefined,
      },
      form: {},

      userForm: {
        pageNum: 1,
        pageSize: 10,
        search: undefined
      },
      userList: [],
      totalNum: 0,
      selectUserInfo: {},
      userId: ''
    }
  },

  created() {
  },
  mounted() {
    this.reset();
    this.getScreenUserList();
  },

  methods: {
    query(params) {
      this.queryParams.search = params
      this.getScreenUserList();
    },
    btnClick() {
      this.innerVisible = true;
      this.getScreenUserList();
    },
    reset() {
      this.resetForm("form");
      this.resetForm("userForm");
    },
    changeType(a) {
      this.form.userId = a.id;
      this.selectUserInfo = a;
      this.showTable = true;
    },

    //选中用户
    selectUser(data) {
      this.innerVisible = false;
      this.form = {};
      this.form.userId = data.id;
      this.selectUserInfo = data;
      this.showTable = true;
    },

    getScreenUserList() {
      getVipList(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.userList = response.data;

          this.userList.forEach(item => {
            item.label = item.id + '--' + item.phone + '--' + item.nickname;
            item.value = item.id
          })
          // this.userList = response.data.map(res => {
          //   let dict = { label: res.id + '--' + res.phone + '--' + res.nickname, value: res.id }
          //   return dict
          // })
          this.totalNum = response.total;
        }
      });
    },

    resetData() {
      this.form = {};
      this.selectUserInfo = {};
      this.showTable = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog-div {
  //   height: 70vh;
  //   overflow: auto;
  padding-right: 30px;
}
.table-box {
  margin-left: 40px;
}
</style>
